<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
		<style>
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}

			.el-form-item {
				width: 100%;
			}

			.el-form-item label {
				/* display: block; */
				width: 50%;
			}

			.el-form {
				/* text-align: center; */
			}

			.el-dialog .el-form-item label {
				width: 30%;
			}

			.el-dialog .el-input {
				width: 400px;

			}
		</style>
	</head>
	<body>

		<div id="app">
			<el-col :span="4">
				<el-menu>
					<el-menu-item label="个人信息" @click="state=1">个人信息</el-menu-item>
					<el-menu-item label="课程安排" @click="state=2">课程安排</el-menu-item>
				</el-menu>
			</el-col>
			<!--教练个人信息-->
			<el-col :span="20" v-if="state==1">
				<el-form style="width: 1000px;"  :model="coach">
					<el-form-item label="头像" prop="picture">
						<el-upload class="avatar-uploader" action="http://localhost:8888/member/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

					<el-form-item label="姓名" prop="coachName">
						<el-input v-model="coach.coachName" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="coach.sexId">
							<el-radio-button label="0">男</el-radio-button>
							<el-radio-button label="1">女</el-radio-button>
						</el-radio-group>
					</el-form-item>
<!-- 					<el-form-item label="生日" prop="birth">
						<el-date-picker v-model="coach.birth" type="date" value-format="YYYY-MM-DD" placeholder="选择日期">
						</el-date-picker>
					</el-form-item> -->
					<el-form-item label="年龄" prop="age" style="width: 100%;">
						<el-input v-model="coach.age" type="text" style="width: 300px;font-size: 16px;">
						</el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="phone" style="width: 100%;">
						<el-input v-model="coach.coachPhone" type="text" style="width: 300px;font-size: 16px;">
						</el-input>
					</el-form-item>
					<el-form-item label="个人简介" prop="description" style="width: 100%;">
						<el-input v-model="coach.description" type="text" style="width: 300px;font-size: 16px;">
						</el-input>
					</el-form-item>
					<el-form-item label="风格" prop="style" style="width: 100%;">
						<el-input v-model="coach.style" type="text" style="width: 300px;font-size: 16px;">
						</el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="coach.coachPassword" style="width: 300px;" show-password></el-input>
						<!-- <el-button @click="dialogFormPwd = true">修改密码</el-button> -->
					</el-form-item>
					<el-form-item style="text-align: center;">
						<el-button type="primary" @click="submitForm()">提交</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<!--课程安排-->
			<el-col :span="20" v-if="state==2">
				<el-table :data="arrangeTable" v-if="state==2">
					<el-table-column type="index" label="序号" width="200">
					</el-table-column>
					<el-table-column prop="subjectName" label="课程名称" width="200">
					</el-table-column>
					<el-table-column prop="startDate" label="课程开始日期" width="200">
					</el-table-column>
					<el-table-column prop="endDate" label="课程结束日期" width="200">
					</el-table-column>
					<el-table-column prop="duration" label="课程节数" width="200">
					</el-table-column>
					<el-table-column prop="number" label="课程名额" width="200">
					</el-table-column>
				</el-table>
			</el-col>

		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					state: 1,
					tabPosition: 'left',
					imageUrl: '',
					radio: '1',
					dialogFormPwd: false,
					coach: {
						coachName: "123",
						sexId: "0",
						age:"",
						coachPhone: "56163161",
						coachPassword: "321651",
						description:"健身狂魔",
						style:"运动达人",
					},
					pwdForm: {
						pwd: "1",
						newPwd: "2",
						confirmPwd: "2"
					},
					arrangeTable: [],
					userForm: {
						name: '',
						sex: '',
						birth: '',
						phone: '',
					},
				}
			},
			methods: {
				deleteRow(index, rows) {
					rows.splice(index, 1);
				},
				//上传图片作为头像
				handleAvatarSuccess(res, file) {
					let _this = this;
					_this.imageUrl = res.data.data;
				},
				beforeAvatarUpload(file) {
					const isJPG = file.type === 'image/jpeg';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				},
				//发送验证码修改手机号码
				sendCode: {

				},
				//分页
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
				},
				submitForm() {
					let _this = this;
					axios.post("/coach/update", {
						coachName:_this.coach.coachName,
						sexId:_this.coach.sexId,
						age:_this.coach.age,
						coachPhone:_this.coach.coachPhone,
						coachPassword:_this.coach.coachPassword,
						style:_this.coach.style,
						description:_this.coach.description,
						photo:_this.imageUrl,
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						transformRequest: function(data) {
							return Qs.stringify(data);
						}
					}).then(function(res) {
						console.log(res);
						if (res.data.data == true) {
							_this.$message({
								message: '修改成功',
								type: 'success'
							});
						}
					}).catch(function() {
						alert('修改信息异常,请稍后再试');
					});
				},
			},
			mounted() {
				var _this = this;
				axios.get("/coach/getallsub").
				then(function(res) {
					let result = res.data;
					if (result.code = 200) {
						_this.arrangeTable = result.data;
						console.log(result);
					} else {
						alert(result.errMsg);
					}
				});
				axios.get("/coach/getinfo").then(function(res){
					let result=res.data;
					if(result.code=200){
						console.log(result);
						_this.coach.coachName=result.data[0].coachName;
						_this.coach.sexId=result.data[0].sexId;
						_this.coach.age=result.data[0].age;
						_this.coach.coachPhone=result.data[0].coachPhone;
						_this.coach.coachPassword=result.data[0].coachPassword;
						_this.imageUrl = result.data[0].photo;
						// _this.coach=result.data[0];
					}
				})
			},
		});
	</script>
</html>
